<template>
	<view>
		<hx-navbar ref="hxnb" :config="config" />
		<view class="deliveryAddress">
			<image style="width: 750rpx;height: 56rpx;" src="../../static/plate/context.png" mode=""></image>
			<view class="address flex justify-between" @click="addressManagement()">
				<view style="text-align: center;">
					<image style="width: 64rpx;height: 64rpx;" src="../../static/plate/car.png" mode=""></image>
					<view style="font-size: 32rpx;font-weight: 500;">
						配送至
					</view>
				</view>
				<view style="text-align: left;font-weight: 500;font-size: 32rpx;width: 410rpx;">
					<view class="flex">
						<text>Dibsns</text>
						<text style="color: #1E1E1E80;margin-left: 28rpx;">18665485541</text>
					</view>
					<view style="margin-top: 15rpx;font-size: 28rpx;">
						重庆市 重庆市 渝北区 并葫芦小学
						旁11-2-1
					</view>
				</view>
				<image style="width: 64rpx;height: 64rpx;margin: auto 0;" src="../../static/topic/7814.png" mode="">
				</image>
			</view>
		</view>
		<view class="commodity">
			<view class="factory flex justify-between align-center" style="padding:26rpx 0 ;">
				<view class="flex align-center">
					<image src="../../static/plate/room.png" mode="" style="width: 64rpx;height: 64rpx;"></image>
					<text style="font-size: 32rpx;font-weight: 500;margin-left: 15rpx;">重庆实木制造工作室</text>
				</view>
				<view class="flex align-center" @click="detail()">
					<text style="color: rgba(30,30,30,0.3);font-size: 32rpx;margin-right: 15rpx;">共2件</text>
					<image src="../../../static/me/right.png" mode="" style="width: 64rpx;height: 64rpx;">
					</image>
				</view>
			</view>
			<view class="shop">
				<view style="flex-wrap: wrap;" class="flex">
					<view style="position: relative;text-align: center;margin-right: 15rpx;"
						v-for="(item,index) in plateData" :key="index">
						<image style="width:152rpx;height:152rpx;border-radius:12rpx;" :src="item.image" mode="">
						</image>
						<image class="imageIco" v-if="item.environmentalProtection == 0" style="right: 10rpx;"
							src="../../static/plate/7816.png" mode="">
						</image>
						<image class="imageIco" v-if="item.environmentalProtection == 1" style="right: 10rpx;"
							src="../../static/plate/8374.png" mode=""></image>
						<image class="imageIco" v-if="item.environmentalProtection == 2" style="right: 10rpx;"
							src="../../static/plate/8375.png" mode=""></image>
					</view>
				</view>
				<view class="flex justify-between" style="margin: 15rpx 0;">
					<text>配送</text>
					<text>商品由商家配送</text>
				</view>
				<view class="flex" style="margin: 15rpx 0;">
					<text style="margin: auto 0;">留言</text>
					<input class="input" type="text" placeholder="如有其他需求，请给商家留言">
				</view>
			</view>
		</view>
		<!-- 订单 -->
		<view class="order">
			<view class="flex" style="justify-content: space-between;margin-bottom: 24rpx;">
				<text class="title">订单号</text>
				<view style="font-size: 28rpx;">
					<text>65983652303022811036529</text>
					<text style="color: #167EC1;margin-left: 20rpx;" @click="paste()">复制</text>
				</view>
			</view>
			<view class="flex justify-between" style="margin: 30rpx 0;">
				<text class="title">产品保险</text>
				<view style="font-size: 28rpx;">由太平洋保险公司提供</view>
			</view>
			<view class="flex justify-between" style="margin: 30rpx 0;">
				<text class="title">雇佣押金支付日期</text>
				<view style="font-size: 28rpx;">2023-02-28 09:43:31</view>
			</view>
			<view class="flex justify-between" style="margin: 30rpx 0;align-items: center;">
				<view style="font-size: 28rpx;text-align: left;">
					<view>
						配送费用
					</view>
					<view style="font-size: 24rpx;color:#1E1E1E4D">
						部分配送由厂家直接配送
						不会产生费用
					</view>
				</view>
				<view style="font-size: 28rpx;text-align: right;font-family: Rubik-Regular, Rubik;">
					1,302.00‬
				</view>
			</view>
			<view class="flex justify-between" style="margin: 30rpx 0;">
				<text class="title">支付方式</text>
				<view style="font-size: 28rpx;">支付宝支付</view>
			</view>
			<view class="flex justify-between align-center"
				style="border-top: 1rpx solid rgba(30,30,30,0.3);padding-top: 30rpx;">
				<text class="title">商品金额</text>
				<view style="font-family: Rubik-Medium, Rubik;font-size: 44rpx;font-weight: 500;">112,560.00
				</view>
			</view>
		</view>
		<!-- 结算 -->
		<view class="settlement flex justify-between">
			<view>
				<view style="font-size: 44rpx;font-family: Rubik-Medium, Rubik;font-weight: 500;color: #F84949;">
					￥112,560.00
				</view>
				<view class="over" @tap="viewOver()">
					查看全部
				</view>
			</view>
			<view class="settled" @click="totalPrice">
				立即结算
			</view>
		</view>
		<!-- 查看全部订单 -->
		<uni-popup id="popup" ref="popup" type="bottom" :animation="true">
			<scroll-view class="uni_popup" scroll-y="true"
				style="padding: 0 30rpx 30rpx 30rpx;background-color: #fff;height: 952rpx;border-radius: 40rpx 40rpx 0 0;">
				<view class="flex" style="padding: 30rpx 0;flex-wrap: wrap;">
					<view v-for="(item,index) in plateData" :key="index"
						style="width: 230rpx;height: 256rpx;text-align: center;">
						<view style="position: relative;">
							<image style="width:152rpx;height:152rpx;border-radius:12rpx;" :src="item.image" mode="">
							</image>
							<image class="imageIco" v-if="item.environmentalProtection == 0" style="right: 50rpx;"
								src="../../static/plate/7816.png" mode="">
							</image>
							<image class="imageIco" v-if="item.environmentalProtection == 1" style="right: 50rpx;"
								src="../../static/plate/8374.png" mode=""></image>
							<image class="imageIco" v-if="item.environmentalProtection == 2" style="right: 50rpx;"
								src="../../static/plate/8375.png" mode=""></image>
						</view>
						<view style="font-size: 36rpx;font-family: Rubik-Medium, Rubik;font-weight: 500;">
							￥{{item.guidePrice}}
						</view>
					</view>
				</view>
			</scroll-view>
		</uni-popup>
		<!-- 详情 -->
		<uni-popup id="popup" ref="detail" type="bottom" :animation="true">
			<view style="background-color: #fff;border-radius: 40rpx 40rpx 0 0;padding: 30rpx;height: 952rpx;">
				<view v-for="(item,index) in plateData" :key="index">
					<view class="flex">
						<view style="position: relative;">
							<image style="width:152rpx;height:152rpx;border-radius:12rpx;" :src="item.image" mode="">
							</image>
							<image v-if="item.environmentalProtection == 0" class="imageIco"
								src="../../static/plate/7816.png" mode=""></image>
							<image class="imageIco" v-if="item.environmentalProtection == 1"
								src="../../static/plate/8374.png" mode=""></image>
							<image class="imageIco" v-if="item.environmentalProtection == 2"
								src="../../static/plate/8375.png" mode=""></image>
						</view>
						<view class="flex justify-between" style="width:100%;margin-left: 20rpx;">
							<view>
								<view style="font-size: 32rpx;color: #333333;margin:12rpx 0;">{{item.name}}
								</view>
								<view class="flex" style="margin:12rpx 0 ;">
									<image style="width:138rpx;height:40rpx;margin-right:10rpx;"
										src="../../static/plate/attestation.png" mode="">
									</image>
									<view
										style="font-size: 20rpx;color: #F84949FF;margin-right:10rpx;border-radius: 10rpx;border: 1rpx solid #F84949;line-height: 32rpx;padding:2rpx 5rpx;">
										{{item.lable}}
									</view>
								</view>
								<view
									style="margin:12rpx 0;color: rgba(30,30,30,0.3);font-size: 24rpx;font-weight: 400;">
									{{item.number}}+人购买过
								</view>
							</view>
							<view style="margin: auto 20rpx;text-align: right;">
								<view
									style="font-size: 40rpx;color: #1E1E1E;font-family: Rubik-Medium, Rubik;font-weight: 500;">
									￥{{item.guidePrice}}</view>
								<view style="font-size: 24rpx;font-weight: 400;color: #1E1E1E;">
									元/平方米
								</view>
							</view>
						</view>
					</view>
					<view class="flex justify-between" style="margin: 30rpx 0;">
						<view class="model">
							型号：{{item.model}} 规格：{{item.specification}}
						</view>
						<text style="color: rgba(30,30,30,0.3);">数量 * 1</text>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				config: {
					title: '提交订单',
					color: '#111111',
					backgroundColor: [1, '#F0F3FA'],
					border: true,
					// #ifdef H5
					backPage: '',
					// #endif
				},
				plateData: [{
						image: '../../static/plate/plate.png',
						environmentalProtection: 0,
						name: '刨花板',
						guidePrice: '560',
						lable: '星级产品',
						number: '600+',
						model: '桃木色(EC-802)',
						specification: '1250*545*600',
						num: '1',
						flag: true
					},
					{
						environmentalProtection: 1,
						image: '../../static/plate/plate.png',
						name: '刨花板',
						guidePrice: '560',
						lable: '星级产品',
						number: '600+',
						model: '桃木色(EC-802)',
						specification: '1250*545*600',
						num: '1',
						flag: true
					}
				],
			}
		},
		methods: {
			paste(value) {
				uni.setClipboardData({
					data: value
				});
			},
			totalPrice() {

			},
			addressManagement() {
				this.$tools.goPageNoAuth('./addressManagement')
			},
			// 查看全部
			viewOver() {
				this.$refs.popup.open()
			},
			// 详情
			detail() {
				this.$refs.detail.open()
			}
		}
	}
</script>

<style scoped>
	.model {
		width: 510rpx;
		height: 46rpx;
		text-align: center;
		background: rgba(30, 30, 30, 0.05);
		border-radius: 8rpx;
		line-height: 46rpx;
		font-size: 24rpx;
		font-family: Noto Sans SC-Regular, Noto Sans SC;
		font-weight: 400;
		color: rgba(30, 30, 30, 0.3);
	}

	.settled {
		width: 206rpx;
		height: 72rpx;
		background: #492D22;
		border-radius: 8rpx;
		font-size: 32rpx;
		font-family: Noto Sans SC-Medium, Noto Sans SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 72rpx;
		text-align: center;
		margin: auto 0;
	}

	.over {
		background: rgba(30, 30, 30, 0.1);
		border-radius: 20rpx;
		font-size: 24rpx;
		width: 128rpx;
		text-align: center;
		line-height: 40rpx;
		margin-top: 20rpx;
	}

	.settlement {
		position: fixed;
		bottom: 0;
		padding: 30rpx;
		width: 100%;
		margin: auto 0;
		background-color: #FFFFFF
	}

	.order {
		margin-top: 30rpx;
		background-color: #fff;
		padding: 30rpx;
	}

	.input {
		font-size: 28rpx;
		margin-left: 30rpx;
		background-color: rgba(30, 30, 30, 0.05);
		width: 610rpx;
		border-radius: 8rpx;
		padding: 20rpx;
		min-height: 64rpx;
	}

	.deliveryAddress {
		background-color: #fff;
		border-radius: 30rpx 30rpx 0 0;
	}

	.address {
		padding: 0rpx 40rpx 50rpx 40rpx;
		background-color: #fff;
	}

	.commodity {
		background-color: #fff;
		padding: 0 30rpx 30rpx 30rpx;
		margin-top: 30rpx;
		background-image: url('../../static/NoPath.png');
		background-size: 100% 100%;
	}

	.imageIco {
		width: 78rpx;
		height: 32rpx;
		position: absolute;
		right: 15rpx;
		bottom: 15rpx;
	}

	.shop {}
</style>
